<div>
	<h2>action-ajax-load class to load html with attr[data-url]</h2>
	<div class="action-ajax-load" data-url="<@url value='/demo/action/html?name=myname&password=mypassword'/>">html body</div>
</div>
<div>
	<h2>action-ajax-btn class to load html to attr data-action-html</h2>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/html?name=myname2&password=mypassword'/>" href="javascript:;" data-action-html="#action_load_body">action-ajax-btn</a><br/>
	<div id="action_load_body">action_load_body</div>
</div>
<div>
	<h2>action-ajax-btn class to load html to attr data-action-html with localhost when 127.0.0.1</h2>
	<a class="action-ajax-btn" data-url="http://localhost:8080/demo/action/html?name=myname2&password=mypassword" href="javascript:;" data-action-html="#action_load_body2">action-ajax-btn  load from localhost</a><br/>
	<div id="action_load_body2">action_load_body</div>
</div>
<div>
	<h2>action-ajax-btn class </h2>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/ajax/load'/>" href="javascript:;">action-ajax-btn</a><br/>
</div>
<div>
	<h2>action-ajax-btn class and show actions</h2>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/info'/>" href="javascript:;">/demo/action/info</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/warn'/>" href="javascript:;">/demo/action/warn</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/error'/>" href="javascript:;">/demo/action/error</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/eval'/>" href="javascript:;">/demo/action/eval</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/confirm-redirect'/>" href="javascript:;">/demo/action/confirm-redirect</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/confirm-action-ajax-load'/>" href="javascript:;">/demo/action/confirm-action-ajax-load</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/confirm-eval'/>" href="javascript:;">/demo/action/confirm-eval</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/info-reload'/>" href="javascript:;">/demo/action/info-reload</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/warn-redirect'/>" href="javascript:;">/demo/action/warn-redirect</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/warn-reload'/>" href="javascript:;">/demo/action/warn-reload</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/redirect'/>" href="javascript:;">/demo/action/redirect</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/topRedirect'/>" href="javascript:;">/demo/action/topRedirect</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/refresh'/>" href="javascript:;">/demo/action/refresh</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/topRefresh'/>" href="javascript:;">/demo/action/topRefresh</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/html'/>" href="javascript:;">/demo/action/html</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/render'/>" href="javascript:;">/demo/action/render</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/pop-html-fragment?name=myname&password=mypassword'/>" href="javascript:;">/demo/action/pop-html-fragment</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/pop-html-fragment-url'/>" href="javascript:;">/demo/action/pop-html-fragment-url</a><br/>
</div>
<div>
	<h2>action-ajax-load class to render html</h2>
	<div class="action-ajax-load" data-url="<@url value='/demo/action/render'/>">render bind body</div>
	<span>id item render:</span><span id="action_render_item">id item render body</span><br/>
	<span>class item render:</span><span class="action-render-item">class item render body</span><br/>
</div>
<div>
	<h2>action-ajax-load with attr[data-action-ajax-load-interval]</h2>
	<div class="action-ajax-load" data-url="<@url value='/demo/action/html?name=myname2&password=mypassword'/>" href="javascript:;" data-action-html="#action_load_body_interval"  data-action-ajax-load-interval="5000000">data-action-ajax-load-interval="5000"</div>
	<div id="action_load_body_interval">action-ajax-load with attr[data-action-ajax-load-interval] body</div>
</div>
<div>
	<h2>action-ajax-btn class to render html and call back with attr [data-action-call-back]</h2>
	<button>a</button>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/render'/>" href="javascript:;" data-action-call-back="alert('call back');">/demo/action/render</a><br/>
</div>
<div>
	<h2>action-ajax-btn class to render html and show loading img with [data-ajax-wait-img]</h2>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/render'/>" href="javascript:;" data-ajax-wait-img="//cdn2.test.zss.cn/images/loading/5-121204194112.gif">show loading img with [data-ajax-wait-img]</a><br/>
</div>
<div>
	<h2>disable action with action-ajax-disable class</h2>
	<a class="action-ajax-btn action-ajax-disable" data-url="<@url value='/demo/action/info'/>" href="javascript:;" data-action-call-back="alert('call back');">class="action-ajax-btn action-ajax-disable"</a><br/>
</div>
<div>
	<h2>do some check before fire the action with action-ajax with attr[data-action-call-before] event it and get return value</h2>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/warn'/>" href="javascript:;" data-action-call-before="(function(){return true;})()">data-action-call-before="(function(){return true;})()</a><br/>
	<a class="action-ajax-btn" data-url="<@url value='/demo/action/warn'/>" href="javascript:;" data-action-call-before="(function(){return false;})()">data-action-call-before="(function(){return false;})()</a><br/>
</div>
<div>
	<h2>action-ajax-form and alert error</h2>
	<form action="<@url value='/demo/action/form/submit'/>" class="action-ajax-form" method="POST"/>
		<div class="form-group"><label for="name">用户名</label><input type="text" name="name" value=""/></div>
		<div class="form-group"><label for="password">密码</label><input type="password" name="password" value=""/></div>
		<div class="form-group"><input type="submit" value="submit"/></div>
	</form>
</div>
<div>
	<h2>action-ajax-form and show error in action-fields-errors class element</h2>
	<form action="/demo/action/form/submit" class="action-ajax-form" method="POST"/>
		<div class="form-group"><label for="name">用户名</label><input type="text" name="name" value=""/></div>
		<div class="form-group"><label for="password">密码</label><input type="password" name="password" value=""/></div>
		<div class="form-group action-fields-errors"></div>
		<div class="form-group"><input type="submit" value="submit"/></div>
	</form>
</div>
<div>
	<h2>action-ajax-form and show error in action-field-error class ; add attr [for] to error field</h2>
	<form action="/demo/action/form/submit" class="action-ajax-form" method="POST"/>
		<div class="form-group"><label for="name">用户名</label><input type="text" name="name" value="" data-action-valid-rule="required;minlength:6;maxlength:15" class="action-valid-field"/><span class="action-field-error" for="name"></span></div>
		<div class="form-group"><label for="password">密码</label><input type="password" name="password" value="" data-action-valid-rule="minlength:6;reg:[^0-9a-zA-Z]" data-action-valid-msg-reg="密码必须含有一个特殊字符" class="action-valid-field"/><span class="action-field-error" for="password"></span></div>
		<div class="form-group"><input type="submit" value="submit"/></div>
	</form>
	
	<h2>action-ajax-form and action-ajax-form-valid-ontime ; show ontime error in action-field-error class ; action back error in action-fields-errors class ;add attr [for] to error field</h2>
	 <form  action="/demo/action/form/submit" class="action-ajax-form action-ajax-form-valid-ontime"  method="post">
	  <div class='action-fields-errors'></div>
		<div class="action-form-field-group">
	           <div class="fm-input">
	          	    <label for="name">用户名</label>
	                <input class="action-valid-field"  type="text" name="userName" placeholder="请输入用户名" maxlength="11" data-action-valid-rule="required;minlength:3;maxlength:11;reg:(?!^[0-9]*$)(?!^[a-zA-Z]*$)(?!^[_]*$)^([a-zA-Z0-9_]{3,11})$" data-action-valid-msg-reg="用户名只能由3到11位字母，数字，下划线任意两类组成！" data-action-valid-msg-required="用户名不能为空！"  data-action-valid-msg-minlength="用户名长度最低三位！" autocomplete="off"/>
	           </div>
	           <div class="action-field-error" for="userName"></div>
	    </div>
	    <div class="action-form-field-group">
	           <div>
                 <label for="password">密码</label>
                 <input  class="action-valid-field"  type="password" name="password" maxlength="18" placeholder="请设置密码" data-action-valid-rule="required;reg:^[a-zA-Z0-9]{6,18}$" data-action-valid-msg-required="密码不能为空！"  data-action-valid-msg-reg="密码只能为6~18位字母数字！" id="password" autocomplete="off"/>
	           </div>
	           <div class="action-field-error" for="password"></div>
	    </div>
	    <div class="action-form-field-group">
	           <div class="fm-input">
                   <label for="password">确认密码</label>
                   <input  class="action-valid-field"type="password" name="confirmPassword" maxlength="18" placeholder="确认密码" autocomplete="off"  data-action-valid-rule="required;equalTo:#password" data-action-valid-msg-required="确认密码不能为空！" data-action-valid-msg-equalTo="两次输入密码不一致！" />
	           </div>
	           <div class="action-field-error" for="confirmPassword"></div>
	    </div>
	    <div>
           <input type="submit" value="submit"/>
        </div>
	</form>
	<div>
		当前台校验支持规则为：required,email,url,date,number,digits,equalTo,maxlength,minlength,max,min,reg<br/>
		规则配置实例：  data-action-valid-rule="required;minlength:6;maxlength:15" 和 data-action-valid-rule="minlength:6;reg:[^0-9a-zA-Z]"  <br/>
		启用即时校验增加class：  action-valid-field<br/>
		校验信息展示class：action-field-error<br/>
		自己定义校验信息： data-action-valid-msg[-规则]=“检验信息” 如 ： data-action-valid-msg-reg="密码必须含有一个特殊字符" <br/>
	</div>
</div>
<!--
<div>
	<h2>time out demo</h2>
	<h3>attr [data-action-time-out-format] = null</h3>
	<div class="action-time-out" data-action-time-out-times="5200">
		<div class="action-time-text">--:--:--</div>
		<div>class remove # class=action-time-out-class-remove attr=data-action-time-out-class-remove : <span class="btn btn-primary btn-lg action-time-out-class-remove" data-action-time-out-class-remove="btn-lg">class remove</span></div>
		<div>add remove # class=action-time-out-class-add attr=data-action-time-out-class-add : <span class="btn  btn-primary action-time-out-class-add" data-action-time-out-class-add="btn-success">add remove</span></div>
		<div>change text # class=action-time-out-text-change attr=data-action-time-out-text-change : <span class="btn  btn-primary action-time-out-text-change" data-action-time-out-text-change="new text">action-time-out-text-change</span></div>
		<div>show # class=action-time-out-show attr=null : <span class="btn  btn-primary action-time-out-show" style="display:none">show me</span></div>
		<div>hide # class=action-time-out-hide attr=null : <span class="btn  btn-primary action-time-out-hide">hide me</span></div>
		<div>state change to disable # class=action-time-out-state-change attr=null : <input type="file" class="btn  btn-primary action-time-out-state-change" value="click me "></div>
		<div>state change to enable# class=action-time-out-state-change attr=null : <input type="file" class="btn  btn-primary action-time-out-state-change" value="click me " disabled="disabled"></div>
	</div>
	<div>
		<h2>action-ajax-load class to load time out html</h2>
		<div class="action-ajax-load" data-url="<@url value='/demo/action/html?name=timeout-item&password=mypassword'/>"  data-action-call-back="$('#timeout-item').timeout();">html body</div>
	</div>
	<h3>attr [data-action-time-out-format] = HH小时mm分ss秒</h3>
	<div class="action-time-out" data-action-time-out-times="600025230" data-action-time-out-format="HH小时mm分ss秒">
		<div class="action-time-text">--小时--分--秒</div>
	</div> 
	<h3>attr [data-action-time-out-format] = dd天HH小时mm分ss秒</h3>
	<div class="action-time-out" data-action-time-out-times="100025230" data-action-time-out-format="dd天HH小时mm分ss秒">
		<div class="action-time-text">--天--小时--分--秒</div>
	</div>
	<h3>attr [data-action-time-out-format] = [dd天]HH小时mm分ss秒</h3>
	<div class="action-time-out" data-action-time-out-times="86405230" data-action-time-out-format="[dd天]HH小时mm分ss秒">
		<div class="action-time-text">--天--小时--分--秒</div>
	</div>
</div>
 -->
<div>
<h2>more page</h2>
<a href="<@url value='/sample/action/index-jquery'/>">/sample/action/index-jquery</a><br/>
<a href="<@url value='/sample/action/index-zepto'/>">/sample/action/index-zepto</a><br/>
<a href="<@url value='/sample/action/index-message-jquery'/>">/sample/action/index-message-jquery</a><br/>
<a href="<@url value='/sample/action/index-message-zepto'/>">/sample/action/index-message-zepto</a><br/>
</div>
